<template>
  <div class="home" v-if="swipeImgs.length !== 0">
    <div class="header">
      <div class="address_map" @click="routerLink">
        <i class="iconfont icon-mark"></i>
        <span>{{ address }}</span>
      </div>

    </div>
    <!-- seacrh -->
    <div class="search" :class="{'isTop':isTop}">
      <div class="input" @click="$router.push('./search')">
        <i class="iconfont icon-sousuo"></i>搜索商家 商家名称
      </div>
    </div>
    <!-- container -->
    <div class="container">
      <!-- 轮播 -->
      <mt-swipe :auto="4000" class="swiper" :class="{'isMargin':isTop}">
        <mt-swipe-item v-for="(img,index) in swipeImgs" :key="index" class="swiper-img">
          <img :src="img">
        </mt-swipe-item>
      </mt-swipe>
    </div>

    <!-- 分类 -->
    <div class="container-catetion">
      <mt-swipe :auto="0" class="swiper">
        <mt-swipe-item v-for="(item,idx) in entries" :key="idx">
          <div class="swiper-catetion">
            <div v-for="(entry,index) in item" :key="index" class="catetion-item">
              <div><img :src="entry.image"></div>
              <div>{{entry.name}}</div>
            </div>
          </div>
        </mt-swipe-item>
      </mt-swipe>
    </div>

    <!-- 推荐商家 -->
    <div class="business" v-if="swipeImgs.length !== 0">
      <span>—</span>推荐商家<span>—</span>
    </div>

    <!-- 排序 -->
    <div class="filter-view" :class="{'isFiterTop':isTop}">
      <FilterView :isfilterMask="isfilterMask" :filterVisible="filterVisible" :filterData="filterData" @fleterClick="fleterClick" @handleClick="handleClick" @handleCanle="handleCanle" @empty="empty" @update="update" />
    </div>

    <!-- 商品列表 -->
    <div class="good-list">
      <mt-loadmore :top-method="loadData" :bottom-method="loadMore" :bottom-all-loaded="allLoaded" :auto-fill="false" :bottomPullText="bottomPullText" ref="loadmore">
        <IndexShow v-for="(item,index) in restaurants" :key="index" :restaurant="item.restaurant" />
      </mt-loadmore>
    </div>

  </div>
</template>
<script>
import { Swipe, SwipeItem } from 'mint-ui';
import FilterView from '../components/FilterView.vue'
import IndexShow from '../components/IndexShow.vue'
export default {
  name: 'home',
  data () {
    return {
      swipeImgs: [],
      entries: [],
      filterData: {},
      filterVisible: false,
      isTop: false,
      isFiterTop: true,
      isfilterMask: false,
      restaurants: [],
      page: 1,
      size: 5,
      allLoaded: false,
      bottomPullText: '上拉加载更多',
      data: null
    }
  },
  created () {
    this.getData()
  },
  computed: {
    address () {
      return this.$store.getters.address
    },
    city () {
      return (
        this.$store.getters.location.addressComponent.city ||
        this.$store.getters.location.addressComponent.province
      )
    },
  },
  methods: {
    /* 点击路由跳转 */
    routerLink () {
      /* 存取store */
      const position = localStorage.getItem('position')
      /* 获取第一次定位的数据 store中的数据 */
      const storePosition = this.$store.getters.location.position

      /* 判断缓存中是否有定位数据，如果没有第一次拿获取定位的数据 */
      if (position == null || position == undefined || position == 'undefined' || position == 'null') {
        let positionobj = JSON.stringify(storePosition)
        localStorage.setItem('position', positionobj)
        console.log('缓存中无数据', position, positionobj);
      } else {
        console.log('缓存中有position', position);
        localStorage.setItem('position', position)
      }
      // return
      this.$router.push({ name: 'address', params: { city: this.city } })
    },

    /* 获取轮播数据 */
    getData () {
      this.$axios("/api/profile/shopping").then(res => {
        this.swipeImgs = res.data.swipeImgs
        this.entries = res.data.entries
      })

      this.$axios("/api/profile/filter").then(res => {
        this.filterData = res.data;
        let navTab = this.filterData.navTab
        for (let i = 0; i < navTab.length; i++) {
          navTab[0].icon = 'iconfont icon-xia'
          navTab[3].icon = 'iconfont icon-saixuan'
        }
        this.filterData.navTab = navTab
        this.filterData.sortBy[0].check = true
        console.log('filterData', this.filterData);
      });
      this.loadData()

    },

    loadData () {
      this.page = 1;
      this.allLoaded = false;
      this.bottomPullText = "上拉加载更多";
      // 拉取商家信息
      this.$axios
        .post(`/api/profile/restaurants/${this.page}/${this.size}`, this.data)
        .then(res => {
          // console.log(res.data);
          this.$refs.loadmore.onTopLoaded();
          this.restaurants = res.data;
        });
    },
    loadMore () {
      if (!this.allLoaded) {
        this.page++;
        // 拉取商家信息
        this.$axios
          .post(`/api/profile/restaurants/${this.page}/${this.size}`)
          .then(res => {
            //  加载完之后重新渲染
            this.$refs.loadmore.onBottomLoaded();
            if (res.data.length > 0) {
              res.data.forEach(item => {
                this.restaurants.push(item);
              });
              if (res.data.length < this.size) {
                this.allLoaded = true;
                this.bottomPullText = "没有更多了哦";
              }
            } else {
              // 数据为空
              this.allLoaded = true;
              this.bottomPullText = "没有更多了哦";
            }
          });
      }
    },

    // 点击tab分类
    handleClick (e) {
      if (e == 0) {
        this.isTop = true
        this.filterVisible = !this.filterVisible
        this.isfilterMask = false
      } else if (e == 3) {
        this.isTop = true
        this.isfilterMask = !this.isfilterMask
        this.filterVisible = false
      } else {
        this.filterVisible = false
        this.isfilterMask = false
      }

    },

    /* 点击list */
    fleterClick (item, e) {
      this.filterData.sortBy.forEach((item, index) => {
        if (e == index) {
          this.filterData.navTab[0].name = item.name
          item.check = true
          this.filterVisible = false
        } else {
          item.check = false
        }
      });
      this.isTop = false
    },

    /* update */
    update (item) {
      let rqeobj = { condition: '' }
      if (item.code) {
        rqeobj.condition = item.code
      } else {
        rqeobj.condition = item
      }
      console.log('rqeobj', rqeobj);
      this.data = rqeobj
      this.loadData()
    },
    /* 点击蒙版 */
    handleCanle (e) {
      this.isTop = e
      this.isfilterMask = false
      this.filterVisible = false
    },

    /* 点击清空 */
    empty () {
      console.log(this.filterData.screenBy);
      this.filterData.screenBy.forEach(item => {
        item.data.forEach(val => {
          val.select = false
        })
      })

    },


  },
  components: {
    FilterView,
    IndexShow,
  },
  mountde () { },
}
</script>
<style scoped>
.home {
  position: relative;
}
.header {
  height: 1rem;
  background-color: #0593ed;
  padding: 0 0.5rem;
}
.address_map {
  color: #fff;
  padding: 0.25rem 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-view {
  position: sticky;
  top: 1.4rem;
  z-index: 999999999;
}
.search {
  z-index: 99999999999;
  padding: 0.2rem;
  position: sticky;
  top: -0.02rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1rem;
  background-color: #0593ed;
}

.search .input {
  width: 80%;
  outline: none;
  height: 0.75rem;
  background-color: #fff;
  line-height: 0.75rem;
  border: 1px rgb(230, 229, 229) solid;
  border-radius: 0.1125rem;
  padding: 0 0.2rem;
  text-align: center;
  color: rgb(139, 139, 138);
}
.search i {
  margin-right: 0.1rem;
  font-size: 0.4rem;
}
.container {
  width: 100%;
  height: 3.5rem;
  overflow: hidden;
}
.container-catetion {
  height: 4rem;
  width: 100%;
  background-color: #fff;
  overflow: hidden;
}
.swiper-img img {
  width: 100%;
  text-align: center;
  height: 3.5rem;
  overflow: hidden;
}
.swiper-catetion {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  height: 3rem;
  padding: 0.2rem 0 0.8rem 0;
}
.swiper-catetion img {
  width: 50%;
}
.catetion-item {
  color: rgb(75, 72, 72);
  font-size: 0.3rem;
  text-align: center;
  width: 20%;
}
.business {
  background-color: #fff;
  text-align: center;
  height: 2rem;
  line-height: 2rem;
}
.business span {
  margin: 0 0.5rem;
  font-size: 0.5rem;
}
.isTop {
  position: fixed;
  top: 0rem;
  width: 100%;
  z-index: 999;
}
.isMargin {
  margin-top: 0.4rem;
}
.isFiterTop {
  position: fixed;
  top: 1.4rem;
  width: 100%;
}
.good-list {
  height: calc(100vh- 3rem);
  overflow: auto;
}
</style>
